/* 查询表单整体样式 */
.custom-search-form {
    display: flex;
    flex-wrap: wrap; /* 允许在一条行容纳不下时，自动换行，以便在小屏幕上保持良好布局 */
    margin: 10px 0; /* 在查询表单整体的上下各留 10px 间距 */
    align-items: center; /* 垂直方向上使内部元素居中对齐 */
}

/* 每个表单组的样式 */
.custom-search-form__group {
    display: flex;
    align-items: center;
    align-items: center; /* 使该组内的 label 和输入控件在垂直方向上居中 */
    margin-right: 20px; /* 每个表单组之间的水平间距，方便布局 */
    margin-bottom: 10px; /* 每个表单组之间的垂直间距，换行后保持分隔 */
    min-width: 200px; /* 确保每个组至少有 200px 的宽度，防止过窄 */
}

/* 标签样式 */
.custom-search-form__group label {
    width: 60px; /* 固定标签宽度，避免因文字多少而引起布局错乱 */
    margin-right: 10px; /* 标签与输入框之间的水平间距 */
    text-align: right; /* 文本靠右对齐，方便对齐输入框 */
    /*font-weight: bold;*/ /* 如果需要加粗标签文本，可取消注释 */
}

/* 输入框和下拉框样式 */
.custom-search-form__group .easyui-textbox,
.custom-search-form__group .easyui-combobox {
    width: 180px; /* 固定输入框宽度，使多个输入框保持一致 */
}

.custom-search-form__group .easyui-datebox {
    width: 200px; /* 日期选择框可稍微宽一点，便于展示日期 */
}

/* 按钮组样式 */
.custom-search-form__actions {
    display: flex;
    align-items: center; /* 让按钮在垂直方向上居中对齐 */
    /*margin-left: auto; !* 将该容器推到最右边，从而让按钮右对齐 *!*/
    margin-right: auto; /* 将该容器推到最左边，从而让按钮左对齐 */
    margin-bottom: 10px; /* 与表单其它元素保持一致的底部间距 */
}

.custom-search-form__actions .easyui-linkbutton {
    margin-left: 10px; /* 按钮之间保留 10px 的间距，避免按钮贴在一起 */
}

/* 响应式设计：在屏幕宽度小于600px时调整布局 */
@media (max-width: 600px) {
    .custom-search-form__group {
        min-width: 100%; /* 每个组占满一行 */
        margin-right: 0;
    }

    .custom-search-form__actions {
        width: 100%;
        justify-content: flex-start;
    }
}






/*以下新增/编辑dialog会话框的CSS规范*/
/* 1. 容器布局：让 form-container 使用 Flex 布局 */
.custom-dlg .custom-dlg-form .form-container {
    display: flex;
    justify-content: space-between;  /* 两列在水平方向上左右分散对齐 */
    flex-wrap: wrap;                 /* 当屏幕较窄时，允许换行排布 */
}

.custom-dlg .custom-dlg-form .form-column {
    flex: 1;                         /* 每列自适应分配宽度 */
    min-width: 350px;                /* 确保每列最小宽度为 350px，防止过窄导致布局混乱 */
    padding: 0 10px;                 /* 为列内元素预留左右 10px 的内边距 */
    box-sizing: border-box;          /* 包含内边距和边框计算在内，避免宽度计算问题 */
}

/* 2. 表单项 .form-group 及其内部的 label */
.custom-dlg .custom-dlg-form .form-group {
    display: flex;
    align-items: center;            /* 使 label 与输入框在垂直方向上居中对齐 */
    justify-content: flex-start;    /* label 和输入控件从左到右排列 */
    margin-bottom: 15px;            /* 每个表单项之间留 15px 的间距 */
}

.custom-dlg .custom-dlg-form .form-group label {
    width: 120px;                   /* 固定 label 宽度，保证对齐 */
    margin-right: 10px;             /* label 与输入框之间的空隙 */
    font-weight: bold;              /* label 加粗，方便用户快速识别字段名称 */
}

/* 3. 图片上传区域（如果需要上传图片的场景则使用此样式） */
.custom-dlg .custom-dlg-form .pic-container {
    position: relative;             /* 使用相对定位，为内部绝对定位的元素（如 input[type="file"]）提供参考点 */
    width: 100px;                   /* 设置容器宽度为 100 像素 */
    height: 100px;                  /* 设置容器高度为 100 像素 */
    border: 1px solid #ccc;         /* 为容器设置边框颜色和边框宽度 */
    border-radius: 4px;             /* 设置边框圆角，使容器有柔和的圆角效果 */
    overflow: hidden;               /* 隐藏超出容器的内容，避免图片溢出边界 */
    cursor: pointer;                /* 鼠标移到容器上时显示点击手势，表明此区域可点击 */
    display: flex;                  /* 使用 Flex 布局，便于居中对齐 */
    align-items: center;            /* 垂直方向居中对齐 */
    justify-content: left;        /* 水平方向居中对齐 */
}

.custom-dlg .custom-dlg-form .pic-container img.thumbnail {
    width: 100%;                    /* 图片宽度填满整个容器 */
    height: 100%;                   /* 图片高度填满整个容器 */
    object-fit: cover;              /* 保持图片比例并填充容器，可能会裁剪图片以避免变形 */
    display: block;                 /* 将图片设置为块级元素，避免图片与其他元素之间出现空白缝隙 */
}

.custom-dlg .custom-dlg-form .pic-container input[type="file"] {
    position: absolute;             /* 文件输入框使用绝对定位，覆盖在整个容器上 */
    top: 0;                         /* 文件输入框的顶部与容器顶部对齐 */
    left: 0;                        /* 文件输入框的左侧与容器左侧对齐 */
    width: 100%;                    /* 文件输入框的宽度与容器一致 */
    height: 100%;                   /* 文件输入框的高度与容器一致 */
    opacity: 0;                     /* 将文件输入框设置为完全透明，使其不可见但实际可点击 */
    cursor: pointer;                /* 鼠标样式设置为点击手势，保持与外层容器一致 */
}







/* 通用键值对容器 */
.key-value-container {
    display: grid;
    gap: 10px 5px; /* 行间距为 10px，列间距为 5px */
    background-color: #e6f7ff; /* 可选：增加背景色以区分 */
    grid-template-columns: repeat(var(--columns, auto-fit), minmax(200px, 1fr)); /* 支持自动列数和列宽 */
    padding: 10px;
    box-sizing: border-box;
}

.key-value-container.bg-blue {
    background-color: #e6f7ff; /* 蓝色背景 */
}

.key-value-container.bg-green {
    background-color: #ccffcc; /* 绿色背景 */
}

.key-value-container.bg-red {
    background-color: #ffcccc; /* 红色背景 */
}

/* 默认一列布局 */
.key-value-container.columns-1 {
    --columns: 1;
}

/* 两列布局 */
.key-value-container.columns-2 {
    --columns: 2;
}

/* 三列布局 */
.key-value-container.columns-3 {
    --columns: 3;
}

/* 四列布局 */
.key-value-container.columns-4 {
    --columns: 4;
}

/* 自适应列布局（动态列数，根据容器宽度自动调整） */
.key-value-container.columns-auto {
    --columns: auto-fit; /* 自动列数，填满可用空间 */
}

/* 通用键值对 */
.key-value-pair {
    display: grid;
    /* 键宽度在 150px 至 300px 之间调整; 1fr 值占据剩余空间 */
    grid-template-columns: minmax(25px, 100px) 1fr;
    /*grid-template-columns: auto 1fr;*/
    /*background-color: #e6f7ff; !* 可选：增加背景色以区分 *!*/
    align-items: center;
    /*padding: 10px;*/
    border-radius: 4px;
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); !* 添加阴影，提升视觉效果 *!*/
    /*transition: background-color 0.3s ease; !* 增加交互效果 *!*/
}

/* 键值对的悬停效果 */
.key-value-pair:hover {
    background-color: #f0f8ff; /* 悬停时改变背景色 */
}

/* 键样式 */
.key-value-pair .key {
    /*font-weight: bold;*/
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333; /* 提升对比度 */
}

/* 值样式 */
.key-value-pair .value {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #555; /* 较弱对比度，避免干扰键的显示 */
}

/* 响应式设计：针对小屏幕的单列布局 */
@media (max-width: 600px) {
    .key-value-container {
        grid-template-columns: 1fr; /* 小屏幕自动切换为单列布局 */
    }
    .key-value-pair {
        grid-template-columns: 1fr; /* 键值对切换为堆叠显示 */
        text-align: left;
    }
    .key-value-pair .key {
        font-weight: normal; /* 减弱权重，避免堆叠布局显得突兀 */
    }
}













/* 以下是查看详情的CSS规范 */
/* BEM Block: detail-window */
/* 整体样式块，定义了容器的基本布局和边框控制 */
.detail-window {
    padding: 5px; /* 内边距，防止内容贴边 */
    box-sizing: border-box; /* 包含padding和border在width计算内，防止溢出 */
    max-width: 100%; /* 最大宽度限制为100%，避免内容超出屏幕宽度 */
    overflow: hidden; /* 防止内容溢出，隐藏超出部分 */
}

/* BEM Element: layout */
/* 用于定义整个窗口的布局结构 */
.detail-window__layout {
    display: flex; /* 启用Flexbox布局 */
    flex-direction: column; /* 垂直方向排列子元素 */
    height: 100%; /* 占满父元素的高度 */
}

/* BEM Element: header */
/* 顶部标题区域样式，包含机柜编号、在线状态等信息 */
.detail-window__header {
    flex: 0 0 auto; /* 固定高度，内容不会自动拉伸 */
    padding: 10px; /* 内边距，确保内容不贴边 */
    background-color: #e6f7ff; /* 设置淡蓝色背景，增强可视性 */
    overflow: auto; /* 如果内容过多，可以滚动 */
}

/* BEM Element: table-container */
/* 内容表格的容器样式 */
.detail-window__table-container {
    flex: 1 1 auto; /* 自动占据剩余的可用空间 */
    padding: 10px; /* 内边距，确保内容不贴边 */
    overflow: auto; /* 如果内容过多，启用滚动条 */
}

/* BEM Element: footer */
/* 底部区域样式，例如操作按钮或状态提示 */
.detail-window__footer {
    flex: 0 0 auto; /* 固定高度，内容不会自动拉伸 */
    text-align: right; /* 文字内容右对齐 */
    padding: 5px; /* 内边距，确保内容不贴边 */
}












/* 权限树样式 */
.permission-tree .tree-title {
    font-size: 13px;
    padding: 3px 0;
}

/* 模块节点 */
.permission-tree .tree-node-top {
    font-weight: bold;
    color: #444;
    background-color: #f5f5f5;
}

/* 权限节点 */
.permission-tree .tree-node-permission {
    color: #333;
}

/* 鼠标悬停效果 */
.permission-tree .tree-node-hover {
    background-color: #e8f2fe;
}

/* 选中效果 */
.permission-tree .tree-node-selected {
    background-color: #dbeaf9;
}

















